<template>
  <div class="dashboard-container">
    <!-- 欢迎信息 -->
    <el-card class="welcome-card">
      <div class="welcome-info">
        <div class="user-info">
          <h2>欢迎回来，{{ userInfo.realName }}</h2>
        </div>
        <div class="time-info">
          <h3>{{ currentTime }}</h3>
          <p>{{ currentDate }}</p>
        </div>
      </div>
    </el-card>

    <!-- 统计数据 -->
    <el-row :gutter="20" class="stat-row">
      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>今日订单</span>
              <el-tag type="success">实时</el-tag>
            </div>
          </template>
          <div class="card-body">
            <h2>{{ stats.todayOrders || 0 }}</h2>
            <div class="trend">
              <span>待处理订单</span>
              <span>{{ stats.pendingOrders || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>订单处理率</span>
              <el-tag type="warning">实时</el-tag>
            </div>
          </template>
          <div class="card-body">
            <h2>{{ calculateOrderRate }}%</h2>
            <div class="trend">
              <span>已处理/总订单</span>
              <span>{{ stats.todayOrders - stats.pendingOrders || 0 }}/{{ stats.todayOrders || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>菜品总数</span>
              <el-tag type="info">实时</el-tag>
            </div>
          </template>
          <div class="card-body">
            <h2>{{ stats.totalDishes || 0 }}</h2>
            <div class="trend">
              <span>上架/下架</span>
              <span>{{ stats.activeDishes || 0 }}/{{ stats.inactiveDishes || 0 }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>热销菜品</span>
              <el-tag type="warning">实时</el-tag>
            </div>
          </template>
          <div class="card-body">
            <h2>{{ stats.hotDishCount || 0 }}</h2>
            <div class="trend">
              <span>占比</span>
              <span>{{ ((stats.hotDishCount / stats.activeDishes) * 100).toFixed(1) }}%</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <!-- 热门菜品 -->
    <el-card class="mt-4">
      <template #header>
        <div class="card-header">
          <span>热门菜品</span>
        </div>
      </template>
      <el-table :data="hotDishes" stripe>
        <el-table-column prop="name" label="菜品名称" />
        <el-table-column prop="name" label="分类" />
        <el-table-column prop="price" label="价格">
          <template #default="{ row }">
            ¥{{ row.price }}
          </template>
        </el-table-column>
        <el-table-column prop="sales" label="销量" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { getStats, getHotDishes } from '@/api/dashboard'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const userInfo = ref({})
const stats = ref({})
const hotDishes = ref([])
const currentTime = ref('')
const currentDate = ref('')
let timer = null

// 计算订单处理率
const calculateOrderRate = computed(() => {
  if (!stats.value.todayOrders) return 0
  const handled = stats.value.todayOrders - stats.value.pendingOrders
  return ((handled / stats.value.todayOrders) * 100).toFixed(1)
})

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString()
  currentDate.value = now.toLocaleDateString()
}

// 获取仪表盘数据
const getDashboardData = async () => {
  try {
    const [statsRes, dishesRes] = await Promise.all([
      getStats(),
      getHotDishes({ limit: 10 })
    ])
    stats.value = statsRes.data
    hotDishes.value = dishesRes.data
  } catch (error) {
    console.error('获取仪表盘数据失败:', error)
  }
}

onMounted(() => {
  userInfo.value = userStore.userInfo
  updateTime()
  timer = setInterval(updateTime, 1000)
  getDashboardData()

  // 每分钟刷新一次数据
  setInterval(getDashboardData, 60000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;

  .welcome-info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
      h2 {
        margin: 0;
        font-size: 24px;
      }
    }

    .time-info {
      text-align: right;
      h3 {
        margin: 0 0 5px;
        font-size: 28px;
        color: #409EFF;
      }
      p {
        margin: 0;
        color: #666;
      }
    }
  }
}

.stat-row {
  margin-bottom: 20px;
}

.stat-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-body {
    h2 {
      margin: 10px 0;
      font-size: 28px;
      color: #333;
    }

    .trend {
      display: flex;
      justify-content: space-between;
      color: #666;
      font-size: 14px;
    }
  }
}

.chart-card {
  margin-bottom: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.mt-4 {
  margin-top: 20px;
}
</style>

